import styled from "styled-components"
import qr from '../../assets/img/qr_login_icon.png'
export const LoginWrapper = styled.div`
    padding: 0 0 0 40px;
    display:flex;
    flex-direction:row;
    justify-content: center;
    .left{
        padding-right:35px;
        border-right:1px dotted #ccc;
        img{
            width:224px;
            height:120px;
        }
        .login-btn{
           width:219px;
           height:31px;
           font-size:12px;
           color:#fff;
           background-position: right -469px;
           border-radius:6px;
           line-height:31px;
           text-align:center;
           margin-top:10px;
           padding: 0 5px 0 0;
        }
        .register-btn{
           width:219px;
           height:31px;
           font-size:12px;
           color:#333;
           background-position: right -100px;
           border-radius:6px;
           line-height:31px;
           text-align:center;
           margin-top:10px;
           padding: 0 5px 0 0;
           i{
            display:inline-block;
            width: 214px;
            background-position: 0 -59px;
           }
        }
        .agreement{
            margin-top:20px;
            font-size:10px;
            label{
                color:rgba(0,0,0,0.40);
                margin-left:2px;
            }
            a{
                color:#507DAF;
                margin-left:3px;
            }
        }
    }
    .right{
        position:relative;
        flex:1;
        padding-left:40px;
        .qq,.weixin,.weibo,.email{
            margin-top:15px;
            display:flex;
            justify-content: flex-start;
            align-items:center;
        }
        i{
            display:inline-block;
            width:38px;
            height:38px;
            margin-right:14px;
        }
        p{
            cursor:pointer;
        }
        .weixin i{
            background-position: -150px -670px;
        }
        .weibo i{
            background-position: -231px -670px;
        }
        .email i{
            background-position: -271px -670px;
        }
        .qq i{
            background-position: -190px -670px;
        }
        .two-code{
            width:52px;
            height:52px;
            position:absolute;
            bottom:0;
            right:0;
            background:url(${qr});
            background-size: contain;
            cursor:pointer;
        }
    }
`